
import React, { Component } from 'react'

// 导入封装好的 NavHeader
import NavHeader from '../../components/NavHeader'

import axios from 'axios'

import { Toast } from 'antd-mobile'

// import './index.css'

import { Link } from 'react-router-dom'

import styles from './index.module.css'

// 覆盖物样式
const labelStyle = {
  cursor: 'pointer',
  border: '1px solid rgba(255, 0, 0)',
  padding: '0px',
  whiteSpace: 'nowrap',
  fontSize: '12px',
  color: 'rgba(255, 255, 255)',
  textAlign: 'center'
}

export default class Map extends Component {
  // 小区下的房源列表
  state = {
    housesList: [],
    // 是否展示房源列表
    isShowList: false
  }
    componentDidMount(){
      this.initMap()

    }

    // 初始化地图
     initMap () {
         // 获取当前定位城市
         const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))
         // 初始化地图实例
         const map = new window.BMap.Map('container')
        //  能够在其他地方获取到
         this.map = map
         // 设置中心点坐标
         // const point = new window.BMap.Point(116.404, 39.915)
 
         //创建地址解析器实例
         const myGeo = new window.BMap.Geocoder();
         // 将地址解析结果显示在地图上，并调整地图视野
         myGeo.getPoint(
           label, 
           async (point)=>{
           if(point){
               // 初始化地图
           map.centerAndZoom(point, 11);
 
         //   添加常用控件
         map.addControl(new window.BMap.NavigationControl())
         map.addControl(new window.BMap.ScaleControl())

        //  调用 renderOverlays()
        this.renderOverlays(value)

        // 获取覆盖物请求的数据
        const res = await axios.get(`http://liufusong.top:8080/area/map?id=${value}`)
        res.data.body.forEach(item => {
          // 为每一条创建覆盖物
          // const { coord: { longitude, latitude }, label: areaName, count, value } = item

          // 创建覆盖物
          // const areaPoint = new window.BMap.Point(longitude, latitude)
          // const label = new window.BMap.Label('', {
          //   position: areaPoint,
          //   offset: new window.BMap.Size(-35, -35)
          // })
           

          // 给label对象添加一个唯一标识
          // label.id = value

          // 设置房源覆盖物
          // label.setContent(`
          // <div class="${styles.bubble}">
          // <p class="${styles.name}">${areaName}</p>
          // <p>${count}套</p>
          // </div>
          // `)
  
           // 设置样式
          //  label.setStyle(labelStyle)
  
          // 添加单击事件
          // label.addEventListener('click', ()=> {
            
          //   // 放大地图 以当前点击的覆盖物为中心 放大地图
          //   // （坐标对象，放大级别）
          //   map.centerAndZoom(areaPoint, 13)
            
          //   // 解决百度地图api内部js报错问题
          //   setTimeout(() => {
          //     // 清除当前覆盖物信息
          //   map.clearOverlays()
          //   }, 0);

          // })
           
          // 添加覆盖物到地图中
          // map.addOverlay(label)

        })
         }
         }, label)

        //  给地图绑定移动事件
        map.addEventListener('movestart', ()=> {
          // console.log('movestart');
          if(this.state.isShowList) {
            this.setState({
              isShowList: false
            })
          }
          
        })
     }

    //  渲染覆盖物入口
    // 1.接收区域id参数 获取该地区下的房源数据
    // 2.获取房源类型以及下级地图缩放级别
    async renderOverlays(id){
      try {
       // 开启loading
      Toast.loading('加载中...', 0, null, false)
      const res = await axios.get(`http://liufusong.top:8080/area/map?id=${id}`)
      // 关闭loading
      Toast.hide()
      const data = res.data.body

      // 调用getTypeAndZoom方法 获取级别和类型
      const { nextZoom, type } = this.getTypeAndZoom()
      data.forEach(item => {
        // 创建覆盖物
        this.createOverlays(item, nextZoom, type)
      })
      } catch (e) {
        // 关闭loading
        Toast.hide()
      }
      
    }

    // 计算要绘制的覆盖物的类型和下一个缩放级别
    getTypeAndZoom() {
      // 调用地图的getZoom方法 来获取当前缩放级别
      const zoom = this.map.getZoom()
      let nextZoom, type
      // console.log(zoom);
      if(zoom >=10 && zoom < 12) {
        // 区
        
        // 下一个缩放级别
        nextZoom = 13
        // circle表示绘制图形覆盖物（区、镇）
        type = 'circle'
      } else if (zoom >= 12 && zoom < 14) {
        // 镇
        nextZoom = 15
        type ='circle'
      } else if (zoom >= 14 && zoom < 16) {
        // 小区
        type = 'rect'
      }
      return {
        nextZoom,
        type
      }
      
    }
    
    // 创建覆盖物
    createOverlays(data, nextZoom, type) {
      const { 
        coord: { longitude, latitude },
        label: areaName, 
        count,
        value 
       } = data
       
      //  创建坐标对象
       const areaPoint = new window.BMap.Point(longitude, latitude)
      if(type === 'circle') {
        // 区、镇
       this.createCircle(areaPoint, areaName, count, value, nextZoom)
      } else {
        // 小区
        this.createRect(areaPoint, areaName, count, value)
      }
    }

    // 创建区镇覆盖物
    createCircle(point, name, count, id, zoom) {
      const label = new window.BMap.Label('', {
        position: point,
        offset: new window.BMap.Size(-35, -35)
      })
       

      // 给label对象添加一个唯一标识
      label.id = id

      // 设置房源覆盖物
      label.setContent(`
      <div class="${styles.bubble}">
      <p class="${styles.name}">${name}</p>
      <p>${count}套</p>
      </div>
      `)

       // 设置样式
       label.setStyle(labelStyle)

      // 添加单击事件
      label.addEventListener('click', ()=> {
        // 调用renderOverlays() 获取该区域下的房源
         this.renderOverlays(id)
        
        // 放大地图 以当前点击的覆盖物为中心 放大地图
        // （坐标对象，放大级别）
        this.map.centerAndZoom(point, zoom)
        
        // 解决百度地图api内部js报错问题
        setTimeout(() => {
          // 清除当前覆盖物信息
        this.map.clearOverlays()
        }, 0);

      })
       
      // 添加覆盖物到地图中
      this.map.addOverlay(label)

    }

    // 创建小区覆盖物
    createRect(point, name, count, id) {
      const label = new window.BMap.Label('', {
        position: point,
        offset: new window.BMap.Size(-50, -28)
      })
       

      // 给label对象添加一个唯一标识
      label.id = id

      // 设置房源覆盖物
      label.setContent(`
        <div class="${styles.rect}">
        <span class="${styles.housename}">${name}</span>
        <span class="${styles.housenum}">${count}</span>
        <i class="${styles.arrow}"></i>
        </div>
      `)

       // 设置样式
       label.setStyle(labelStyle)

      // 添加单击事件
      label.addEventListener('click', (e)=> {
        // 调用下面的方法
        this.getHouseList(id) 

        // 获取当前被点击项
        const target = e.changedTouches[0]
        this.map.panBy(
          window.innerWidth / 2 - target.clientX,
          (window.innerHeight -330) / 2 - target.clientY
          )
        //  console.log(target);
      })
       
      // 添加覆盖物到地图中
      this.map.addOverlay(label)

    }

    // 获取小区房源数据
    async getHouseList(id) {
      try {
        // 开启loading
      Toast.loading('加载中...', 0, null, false)
      const res = await axios.get(`http://liufusong.top:8080/houses?cityId=${id}`)
      // 关闭loaing
      Toast.hide()
      //  console.log(res);
      this.setState({
        housesList: res.data.body.list,

        // 展示房源列表
        isShowList: true
      })
      } catch (e) {
        // 关闭loaing
      Toast.hide()
      }
     
    }

    // 封装渲染房屋列表的方法
    renderHousesList () {
      return this.state.housesList.map(item => (
        <div className={styles.house} key={item.houseCode}>
        <div className={styles.imgWrap}>
         <img 
           className={styles.img}
           src={`http://liufusong.top:8080${item.houseImg}`}
           alt=''
         />
        </div>
       <div className={styles.content}>
         <h3 className={styles.title}>
          {item.title}
         </h3>
         <div className={styles.desc}>{item.desc}</div>
         <div>
          {
            item.tags.map((tag, index) => {
              const tagClass = 'tag' + (index + 1)
              return (
                <span className={[styles.tag, styles[tagClass]].join(' ')} key={tag}>{tag}</span>
              )
            })
          }
         </div>
         <div className={styles.price}>
           <span className={styles.priceNum}>{item.price}</span> 元/月
         </div>
       </div>
      </div>
      ))
    }

    render() {
        return (
            <div className={styles.map}>
                {/* 顶部导航栏组件 */}
                <NavHeader>
                  地图找房
                </NavHeader>
              {/* 地图容器元素 */}
              <div id='container' className={styles.container}></div>

              {/* 房源列表 */}
              {/* 添加styles.show 展示房屋列表 */}
              <div className={[styles.houseList, this.state.isShowList ? styles.show : ' '].join(' ')}>
                <div className={styles.titleWrap}>
                  <h1 className={styles.listTitle}>房屋列表</h1>
                  <Link className={styles.titleMore} to="/home/list">
                    更多房源
                  </Link>
                </div>
                
                <div className={styles.houseItems}>
                  {/* 房屋结构 */}
                  {
                    this.renderHousesList()
                  }
                </div>
              </div>
            </div>
        )
    }
}
